<case value="subpicture">
    <!-- <link rel="stylesheet" type="text/css" href="__PUBLIC__/libs/cropper/css/amazeui.min.css"> -->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/libs/cropper/css/cropper.css">
    <!-- <link rel="stylesheet" type="text/css" href="__PUBLIC__/libs/cropper/css/custom_up_img.css"> -->
    <!-- <script type="text/javascript" src="__PUBLIC__/libs/cropper/js/amazeui.min.js" ></script> -->
    <script type="text/javascript" src="__PUBLIC__/libs/cropper/js/cropper.js"></script>
    <style>
        .cropper-container{
            max-width:100%;
        }
    </style>

    <div class="form-group item_{$[type]form.name} {$[type]form.extra.class|default=''}">
        <label class="left control-label">{$[type]form.title}：</label>
        <div class="right row">
            <div id="[type]{$group_k|default=''}_upload_box_{$[type]k}" class="wu-example">
                <!--用来存放文件信息-->
                <div id="[type]{$group_k|default=''}_upload_list_{$[type]k}" class="uploader-list col-xs-12 img-box">
                    <notempty name="[type]form.value">
                        <div id="[type]{$group_k|default=''}_upload_preview_{$[type]k}" class="col-sm-3 file-item thumbnail">
                            <i class="fa fa-times-circle remove-picture"></i>
                            <img src="{$[type]form.value|get_cover}" data-id="{$[type]form.value}">
                        </div>
                        <else />
                        <div id="[type]{$group_k|default=''}_upload_preview_{$[type]k}" class="col-sm-3 file-item thumbnail hidden">
                            <i class="fa fa-times-circle remove-picture"></i>
                            <img>
                        </div>
                    </notempty>
                </div>
                <div class="btns col-xs-12">
                    <input type="hidden" id="[type]{$group_k|default=''}_upload_input_{$[type]k}" name="{$[type]form.name}"
                        value="{$[type]form.value}">
                    <div id="[type]{$group_k|default=''}_upload_{$[type]k}" class="btn btn-primary">上传图片</div>
                    <button id="ctlBtn" class="btn btn-default hidden">开始上传</button>
                    <notempty name="[type]form.tip">
                        <span class="check-tips text-muted small">{$[type]form.tip}</span>
                    </notempty>
                </div>
            </div>

            <div class="modal fade" tabindex="-1" role="dialog" id="[type]{$group_k|default=''}-doc-modal-{$[type]k}">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">修改图片</h4>
                        </div>
                        <div class="modal-body">
                            <img alt="" src="" id="[type]{$group_k|default=''}_image_{$[type]k}" style="width: 100%;">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="[type]{$group_k|default=''}_save_crop_{$[type]k}">保存图片</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--图片上传框-->
            <!-- <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
                <div class="am-modal-dialog up-frame-parent up-frame-radius">
                    <div class="am-modal-hd up-frame-header">
                        <label>修改图片</label>
                        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                    </div>
                    <div class="am-modal-bd  up-frame-body">
                        <div class="am-g am-fl">
                            <div class="am-form-group am-form-file">
                                <div class="am-fl">
                                    <button type="button" class="am-btn am-btn-default am-btn-sm">
                                        <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                                </div>
                                <input type="file" id="inputImage">
                            </div>
                        </div>
                        <div class="am-g am-fl">
                            <div class="up-pre-before up-frame-radius">
                                <img alt="" src="" id="image">
                            </div>
                            <div class="up-pre-after up-frame-radius">
                            </div>
                        </div>
                        <div class="am-g am-fl">
                            <div class="up-control-btns">
                                <span class="am-icon-rotate-left" onclick="rotateimgleft()"></span>
                                <span class="am-icon-rotate-right" onclick="rotateimgright()"></span>
                                <span class="am-icon-check" id="up-btn-ok" url="admin/user/upload.action"></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div> -->

            <!--加载框-->
            <!-- <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">正在上传...</div>
                    <div class="am-modal-bd">
                        <span class="am-icon-spinner am-icon-spin"></span>
                    </div>
                </div>
            </div> -->

            <!--警告框-->
            <!-- <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
                <div class="am-modal-dialog">
                    <div class="am-modal-hd">信息</div>
                    <div class="am-modal-bd" id="alert_content">
                        成功了
                    </div>
                    <div class="am-modal-footer">
                        <span class="am-modal-btn">确定</span>
                    </div>
                </div>
            </div> -->

            <script type="text/javascript">
                function rotateimgright() {
                    $("#[type]{$group_k|default=''}_image_{$[type]k}").cropper('rotate', 90);
                }

                function rotateimgleft() {
                    $("#[type]{$group_k|default=''}_image_{$[type]k}").cropper('rotate', -90);
                }

                function set_alert_info(content) {
                    $("#alert_content").html(content);
                }

                $(function () {
                    // $("#[type]{$group_k|default=''}_upload_{$[type]k}").click(function () {
                    //     $("#doc-modal-2").modal({
                    //         width: '600px'
                    //     });
                    // });

                    'use strict';
                    // 初始化
                    // const image = document.getElementById('image-1');
                    // new Cropper(image, {
                    //     aspectRatio: '1',
                    // })
                    // // $image.cropper({
                    // //     aspectRatio: '1',
                    // //     autoCropArea: 0.8,
                    // //     preview: '.up-pre-after',

                    // // });

                    // // 事件代理绑定事件
                    // $('.docs-buttons').on('click', '[data-method]', function () {

                    //     var $this = $(this);
                    //     var data = $this.data();
                    //     var result = $image.cropper(data.method, data.option, data.secondOption);
                    //     switch (data.method) {
                    //         case 'getCroppedCanvas':
                    //             if (result) {
                    //                 // 显示 Modal
                    //                 $('#cropped-modal').modal().find('.am-modal-bd').html(result);
                    //                 $('#download').attr('href', result.toDataURL('image/jpeg'));
                    //             }
                    //             break;
                    //     }
                    // });

                    // // 上传图片
                    // var $inputImage = $('#inputImage');
                    // var URL = window.URL || window.webkitURL;
                    // var blobURL;

                    // if (URL) {
                    //     $inputImage.change(function () {
                    //         var files = this.files;
                    //         var file;

                    //         if (files && files.length) {
                    //             file = files[0];

                    //             if (/^image\/\w+$/.test(file.type)) {
                    //                 blobURL = URL.createObjectURL(file);
                    //                 $image.one('built.cropper', function () {
                    //                     // Revoke when load complete
                    //                     URL.revokeObjectURL(blobURL);
                    //                 }).cropper('reset').cropper('replace', blobURL);
                    //                 $inputImage.val('');
                    //             } else {
                    //                 window.alert('Please choose an image file.');
                    //             }
                    //         }

                    //         // Amazi UI 上传文件显示代码
                    //         var fileNames = '';
                    //         $.each(this.files, function () {
                    //             fileNames += '<span class="am-badge">' + this.name + '</span> ';
                    //         });
                    //         $('#file-list').html(fileNames);
                    //     });
                    // } else {
                    //     $inputImage.prop('disabled', true).parent().addClass('disabled');
                    // }

                    // //绑定上传事件
                    // $('#up-btn-ok').on('click', function () {
                    //     var $modal = $('#my-modal-loading');
                    //     var $modal_alert = $('#my-alert');
                    //     var img_src = $image.attr("src");
                    //     if (img_src == "") {
                    //         set_alert_info("没有选择上传的图片");
                    //         $modal_alert.modal();
                    //         return false;
                    //     }

                    //     $modal.modal();

                    //     var url = $(this).attr("url");
                    //     var canvas = $("#image").cropper('getCroppedCanvas');
                    //     var data = canvas.toDataURL(); //转成base64
                    //     $.ajax({
                    //         url: url,
                    //         dataType: 'json',
                    //         type: "POST",
                    //         data: {
                    //             "image": data.toString()
                    //         },
                    //         success: function (data, textStatus) {
                    //             $modal.modal('close');
                    //             set_alert_info(data.result);
                    //             $modal_alert.modal();
                    //             if (data.result == "ok") {
                    //                 $("#up-img-touch img").attr("src", data.file);

                    //                 var img_name = data.file.split('/')[2];
                    //                 console.log(img_name);
                    //                 $("#pic").text(img_name);
                    //             }
                    //         },
                    //         error: function () {
                    //             $modal.modal('close');
                    //             set_alert_info("上传文件失败了！");
                    //             $modal_alert.modal();
                    //             //console.log('Upload error');
                    //         }
                    //     });

                    // });



                    var uploader_[type]{$group_k|default=''}_upload_{$[type]k} = WebUploader.create({
                        withCredentials: true,                                                             // 跨域请求提供凭证
                        auto: true,                                                                        // 选完文件后，是否自动上传
                        duplicate: true,                                                                   // 同一文件是否可以重复上传
                        swf: '__LYUI__/swf/uploader.swf',                                                  // swf文件路径
                        server: '{:U(MODULE_MARK."/Upload/upload", array("dir" => "image"), true, true)}', // 文件接收服务端
                        pick: '#[type]{$group_k|default=''}_upload_{$[type]k}',                                       // 选择文件的按钮
                        resize: false,                                                                     // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                        //fileNumLimit: 1,                                                                 // 验证文件总数量, 超出则不允许加入队列
                        fileSingleSizeLimit:<php> echo (isset($[type]form['extra']['self']) && isset($[type]form['extra']['self']['size'])) ? $[type]form['extra']['self']['size'] : C('UPLOAD_IMAGE_SIZE'); </php>*1024*1024, // 验证单个文件大小是否超出限制, 超出则不允许加入队列
                        // 文件过滤
                        accept: {
                            title: 'Images',
                            extensions: "<php> echo (isset($[type]form['extra']['self']) && isset($[type]form['extra']['self']['ext'])) ? $[type]form['extra']['self']['ext'] : 'gif,jpg,jpeg,bmp,png'; </php>",
                            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
                        }
                    });
                    
                    // 文件上传过程中创建进度条实时显示。
                    uploader_[type]{$group_k|default=''}_upload_{$[type]k}.on( 'uploadProgress', function(file, percentage ) {
                        $('#[type]{$group_k|default=''}_upload_preview_{$[type]k}').removeClass('hidden');
                        var $li = $( '#[type]{$group_k|default=''}_upload_preview_{$[type]k}'),
                            $percent = $li.find('.progress .progress-bar');
                        // 避免重复创建
                        if ( !$percent.length ) {
                            $percent = $('<div class="progress"><div class="progress-bar"></div></div>')
                                    .appendTo( $li )
                                    .find('.progress-bar');
                        }
                        $percent.css('width', percentage * 100 + '%');
                    });
                    
                    // 完成上传完了，成功或者失败，先删除进度条。
                    uploader_[type]{$group_k|default=''}_upload_{$[type]k}.on('uploadComplete', function(file) {
                        $( '#[type]{$group_k|default=''}_upload_preview_{$[type]k}' ).find('.progress').remove();
                    });
                    
                    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                    uploader_[type]{$group_k|default=''}_upload_{$[type]k}.on('uploadSuccess', function(file , response) {
                        $('#[type]{$group_k|default=''}_upload_preview_{$[type]k}').addClass('upload-state-done');
                        if (eval('response').status == 0) {
                            $.alertMessager(response.message);
                        } else {
                            $("#[type]{$group_k|default=''}_image_{$[type]k}").attr('src', response.url)
                            $("#[type]{$group_k|default=''}-doc-modal-{$[type]k}").modal()
                            initCrop();
                            // $( '#[type]{$group_k|default=''}_upload_input_{$[type]k}').attr('value', response.id);
                            // $( '#[type]{$group_k|default=''}_upload_preview_{$[type]k} img').attr('src', response.url);
                        }
                    });
                    
                    // 上传错误
                    uploader_[type]{$group_k|default=''}_upload_{$[type]k}.on("error",function (type){
                        if (type=="Q_TYPE_DENIED") {
                            $.alertMessager('该文件格式不支持');
                        } else if(type=="F_EXCEED_SIZE") {
                            $.alertMessager("文件大小不允许超过{:C('UPLOAD_IMAGE_SIZE')}MB");
                        } else if(type=="Q_EXCEED_NUM_LIMIT") {
                            $.alertMessager("超过允许的文件数量");
                        } else {
                            $.alertMessager(type);
                        }
                    });
                    
                    // 文件上传失败，显示上传出错。
                    uploader_[type]{$group_k|default=''}_upload_{$[type]k}.on('uploadError', function(file) {
                        $.alertMessager('error');
                        var $li = $('#[type]{$group_k|default=''}_upload_preview_{$[type]k}'),
                            $error = $li.find('div.error');
                        // 避免重复创建
                        if (!$error.length) {
                            $error = $('<div class="error"></div>').appendTo($li);
                        }
                        $error.text('上传失败');
                    });
                    
                    // 删除图片
                    $(document).on('click', '#[type]{$group_k|default=''}_upload_list_{$[type]k} .remove-picture', function() {
                        $('#[type]{$group_k|default=''}_upload_input_{$[type]k}' ).val('') //删除后覆盖原input的值为空
                        $('#[type]{$group_k|default=''}_upload_preview_{$[type]k}').addClass('hidden');
                    });
                    
                    var cropper;
                    function initCrop(){
                        var image = document.getElementById("[type]{$group_k|default=\'\'}_image_{$[type]k}");
                        if(cropper){
                            cropper.destroy()
                        }
                        cropper=new Cropper(image, {
                            viewMode:"1",
                            cropBoxResizable:false,
                            aspectRatio:<if condition="is_array($[type]form['options']) AND empty($[type]form['options'])">16/9 <else />{$[type]form.options}</if>,
                            minContainerWidth:600,
                            minContainerHeight:300,
                        })
                    }

                    $("#[type]{$group_k|default=''}_save_crop_{$[type]k}").click(function(){
                        cropper.getCroppedCanvas().toBlob((blob) => {
                            var $image =$("#[type]{$group_k|default=''}_image_{$[type]k}")
                            console.log(blob)
                            var formData = new FormData();
                            // formData.append('type','image/jpeg')
                            formData.append('file', blob,'crop.png');
                           
                            // Use `jQuery.ajax` method
                            $.ajax('{:U(MODULE_MARK."/Upload/upload", array("dir" => "image"), true, true)}', {
                                method: "POST",
                                data: formData,
                                processData: false,
                                contentType: false,
                                dataType:"json",
                                success(response) {
                                    if (response.status == 0) {
                                        $.alertMessager(response.message);
                                    } else {
                                        $('#[type]{$group_k|default=\'\'}-doc-modal-{$[type]k}').modal('hide')
                                        $( '#[type]{$group_k|default=''}_upload_input_{$[type]k}').attr('value', response.id);
                                        $( '#[type]{$group_k|default=''}_upload_preview_{$[type]k} img').attr('src', response.url);
                                    }
                                },
                                error() {
                                    console.log('Upload error');
                                },
                            });
                        });                       
                    })
                });
            </script>
        </div>
    </div>
</case>